<template>
  <el-aside
    :class="
      'layout-aside-' +
      config.layout.layoutMode +
      ' ' +
      (config.layout.shrink ? 'shrink' : '')
    "
  >
    <div class="fold">
      <div v-if="!config.layout.overviewCollapse">行政区划</div>
      <!-- <Menu @click="onMenuCollapse" style="width: 1.3em; height: 1.3em" /> -->
      <Icon
        size="13"
        name="fa fa-filter"
        @click="onMenuCollapse"
        style="cursor: pointer"
        title="行政区划过滤"
      />
    </div>
    <el-input
      v-if="!config.layout.overviewCollapse"
      v-model="filterText"
      placeholder="输入关键字进行过滤"
      style="background: whitesmoke"
    />
    <el-scrollbar ref="verticalMenusRef" class="vertical-menus-scrollbar">
      <el-tree
        v-if="!config.layout.overviewCollapse"
        ref="treeRef"
        class="filter-tree"
        :data="state.regionOptions"
        :props="defaultProps"
        node-key="areaId"
        show-checkbox
        default-expand-all
        @check="handleCheckChange"
        :filter-node-method="filterNode"
      />
    </el-scrollbar>
  </el-aside>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed, watch, reactive, inject } from "vue";
import Main from "./components/main.vue";
import { ElTree, ElScrollbar } from "element-plus";
import { useConfig } from "@/store/config"; //后台布局相关仓库
import { useRegion } from "@/store/backend/SysM/region";
// import type baTableClass from "@/utils/baTable";

interface Region {
  address: string | null;
  addressDetail: string | null;
  areaFlag: string | null;
  areaId: number;
  areaName: string | null;
  areaNo: string | null;
  children: Region[];
  createBy: string | null;
  createTime: string | null;
  endTime: string | null;
  params: any;
  parentId: number;
  searchValue: string | null;
  startTime: string | null;
  updateBy: string | null;
  updateTime: string | null;
}
const filterText = ref("");
const treeRef = ref<InstanceType<typeof ElTree>>();
const config = useConfig();
const region = useRegion();
const verticalMenusRef = ref<InstanceType<typeof ElScrollbar>>();
// const baTable = inject("baTable") as baTableClass;

const defaultProps = {
  children: "children",
  label: "areaName",
};

const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return data.areaName.includes(value);
};

const state: { regionOptions: anyObj[] } = reactive({
  regionOptions: [], //区域列表
});

// 传递给父组件的值
const emit = defineEmits(["on-chooseRegion"]);
//选择区域后调取区域数据展示
const handleCheckChange = (row: Region, node: any) => {
  console.log("row", row, "node", node);
  emit("on-chooseRegion", row, node);
};

// 控制菜单是否折叠
const onMenuCollapse = () => {
  config.overViewsetLayout("overviewCollapse", !config.layout.overviewCollapse);
};

//针对侧边栏菜单高度让滚动条自适应
const overviewMenusScrollbarHeight = computed(() => {
  // 加上了50px的头部距离
  let menuTopBarHeight = 50;
  if (config.layout.layoutMode == "Default") {
    //32为aside上下margin
    return "calc(100vh - " + (172 + menuTopBarHeight) + "px)";
  } else {
    return "calc(100vh - " + (140 + menuTopBarHeight) + "px)";
  }
});

const menuWidth = computed(() => config.overviewMenuWidth());

onMounted(() => {
  region.getRegionByRole().then((res: any) => {
    state.regionOptions = res;
    console.log("regionOptions", res);
  });
});

watch(filterText, (val) => {
  treeRef.value!.filter(val);
});
</script>
<style lang="scss" scoped>
.layout-aside-Default {
  background-color: #fff;
  background: var(--ba-bg-color-overlay);
  margin: 0;
  height: 100%;
  box-shadow: var(--el-box-shadow-light);
  border-radius: var(--el-border-radius-base);
  overflow: hidden;
  transition: width 0.3s ease;
  width: v-bind(menuWidth);

  .vertical-menus-scrollbar {
    height: v-bind(overviewMenusScrollbarHeight);
    overflow-x: hidden;
    .filter-tree {
      display: inline-block;
    }
  }

  .fold {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 10px;
  }
}

.layout-aside-Classic {
  background: var(--ba-bg-color-overlay);
  margin: 0;
  height: 100%;
  overflow: hidden;
  transition: width 0.3s ease;
  width: v-bind(menuWidth);

  .vertical-menus-scrollbar {
    height: v-bind(overviewMenusScrollbarHeight);
    overflow-x: hidden;
    .filter-tree {
      display: inline-block;
    }
  }

  .fold {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 10px;
  }
}
</style>
